<template>
  <div>
    <div class="customTimer1 isBorder">
      <div class="timer-title">{{ title }}</div>
      <div v-if="isInterval" class="timer-box isBorder" @click="openTimerPicker('interval')">
        <van-field v-model="startTime" label="" placeholder="开始时间" class="startTime" input-align="center" clickable readonly @click="openTimerPicker('interval')" />
        <span>至</span>
        <van-field v-model="endTime" label="" placeholder="结束时间" class="endTime" input-align="center" clickable readonly @click="openTimerPicker('interval')" />
      </div>
      <div v-else class="timer-box isBorder" @click="openTimerPicker('once')">
        <van-field v-model="dateTime" label="" placeholder="选择时间" class="startTime" input-align="center" readonly clickable @click="openTimerPicker('once')" />
      </div>
    </div>
    <van-popup v-model="showTimer" position="bottom" get-container="body">
      <template v-if="isInterval">
        <van-datetimesec-picker
          v-if="showTimer && showStartTime"
          v-model="STime"
          title-type="start"
          :type="type"
          @cancel="showTimer= false,showStartTime=false"
          @input="(val) => {getTime(val, 'startTime')}"
        />
        <van-datetimesec-picker
          v-if="showTimer && showEndTime"
          v-model="ETime"
          title-type="end"
          :type="type"
          @cancel="showTimer= false,showEndTime=false"
          @input="(val) => {getTime(val, 'endTime')}"
        />
      </template>
      <template v-else>
        <van-datetimesec-picker
          v-if="!isInterval"
          ref="datetimePicker"
          v-model="timeValue"
          title-type="time"
          :type="type"
          @cancel="showTimer = false"
          @input="(val) => {getTime(val, 'timeValue')}"
        />
      </template>
      <van-button v-if="isClear" type="warning" class="w-100" @click="clearTimer">清空</van-button>
    </van-popup>
  </div>
</template>

<script>
import VanDatetimesecPicker from './dateTimeset.vue'

export default {
  components: { VanDatetimesecPicker },
  props: {
    type: {
      type: String,
      default: 'datetime'
    },
    // 开始时间
    start: {
      type: String,
      default: ''
    },
    // 结束时间
    end: {
      type: String,
      default: ''
    },
    // 时间
    dateValue: {
      type: String,
      default: ''
    },
    // 是否是时间区间
    isInterval: {
      type: Boolean,
      default: true
    },
    // 是否清除
    isClear: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showTimer: false,
      showStartTime: false,
      showEndTime: false,
      startTime: '',
      endTime: '',
      dateTime: '',
      typePicker: ''
    }
  },
  watch: {
    start(nv) {
      this.startTime = nv
    },
    end(nv) {
      this.endTime = nv
    },
    dateValue(nv) {
      this.dateTime = nv
    }
  },
  mounted() {
    if (this.isInterval) {
      this.startTime = this.start
      this.endTime = this.end
    } else {
      this.dateTime = this.dateValue
    }
  },
  methods: {
    openTimerPicker(type) {
      this.typePicker = type
      if (type === 'interval') {
        if (this.startTime !== '' && this.endTime !== '') {
          this.STime = this.startTime
          this.ETime = this.endTime
        } else {
          this.STime = ''
          this.ETime = ''
        }
        this.showTimer = true
        this.showStartTime = true
        this.showEndTime = false
      } else {
        this.dateValue !== '' ? (this.timeValue = new Date(...this.setTimer(this.dateValue))) : (this.timeValue = '')
        this.showTimer = true
      }
    },
    getTime(val, type) {
      this[type] = val
      if (type === 'startTime') {
        this.showStartTime = false
        this.showEndTime = true
      } else if (type === 'endTime') {
        this.showEndTime = false
        this.showTimer = false
        this.emit()
      } else {
        this.showTimer = false
        this.emit()
      }
    },
    clearTimer() {
      this.timeValue = ''
      this.startTime = ''
      this.endTime = ''
      this.showTimer = false
      this.showStartTime = false
      this.showEndTime = false
      this.emit()
    },
    emit() {
      if (this.typePicker === 'interval') {
        this.$emit('update:start', this.startTime)
        this.$emit('update:end', this.endTime)
      } else {
        this.$emit('update:dateValue', this.dateTime)
      }
      this.$emit('change')
    }
  }
}
</script>
<style lang="scss">
.customTimer1 {
  margin-bottom: 30px;
  .timer-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .timer-box {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    span {
      flex-shrink: 0;
      padding: 0 10px;
    }
    .van-cell {
      padding: 0 10px;
      &:active {
        background-color: rgba(0, 0, 0, 0);
      }
      .van-field__control {
        height: 25px;
        font-size: 12px;
        &:disabled {
          color: #323233;
          -webkit-text-fill-color: #323233;
        }
      }
      &::after {
        display: none;
      }
    }
    .down {
      color: #838282;
    }
    &.isBorder {
      border: 1px solid #e9e9e9;
    }
  }
}
</style>
